<!DOCTYPE html>
<html>
<head>
    <title>同步加载脚本</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js" type="text/javascript"></script>
    <script>window.__dialog_settings = {"register": true};</script>
    <script src="static/dialog/dialog.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<div onclick="x01()">alert</div>
    <div onclick="x02()">confirms</div>
    <div onclick="x03()">自定义，遮罩，标题，关闭按钮，高，宽，位置，按钮</div>
    <div onclick="x04()">更改了主题，通过回调函数重写弹窗</div>
    <div onclick="x05()">我有一个二级弹窗</div>
    <div onclick="x06()">测试</div>
<script>
var BUTTON_OK = {
        "ok":   {"text": "确定", "primary": true, "default": true}   // primary: true 表示该按钮是主按钮，在界面上应该着重表示
    }, BUTTON_OK_CANCEL = {
        "ok":       {"text": "确定", "primary": true, "default": true},   // default: true 表示该按钮响应回车按键
        "cancel":   {"text": "取消", "cancel": true}  // cancel: true 表示该按钮响应ESC按键
    }, BUTTON_YES_NO = {
        "yes":  {"text": "是", "primary": true},
        "no":   {"text": "否", "primary": true}
    }, BUTTON_YES_NO_CANCEL = { 
        "yes":      {"text": "是", "primary": true},
        "no":       {"text": "否", "primary": true,"cancel": true},
        "cancel":   {"text": "取消", "cancel": true}
    };
function x01(){
    alert("我是alert!");
}
function x02(){
    var onclose = function (blo) {
        if (blo) {return true};
        return false;
    }
    confirm("我是confirm!",onclose);
}
function x03(){
    var myDialog =new dialog();
    var btn={
        "yes" : { "text": "是是是是" ,"default": true},
        // "no"  : {"text": "否否否否", "primary": true},
    }
    myDialog.show({
        "title": "我是标题", 
        "message": "我是消息",
        "modal":true,
        "position":"150 150",
        "buttons":btn,
        "closable":true,
        "height":"150",
        "width":"300"});
}
function x04(){
    var onclose = function (x,y){
        y.update({
        "title": "我被重写了", 
        "message": "我真的被重写了",
        "modal":true,
        "position":"150 150",
        "buttons":null,//如果设置对象为null 则清空对象
        "closable":true,
        "height":"150",
        "width":"300"});
        return false;
    }
    var myDialog = new dialog("dialog-new");
    myDialog.show({
        "title": "我有新的主题",
        "buttons":BUTTON_OK_CANCEL},onclose);
}
function x05(){
    var onclose = function (x,y){
        if(x == "cancel" || x == "no"){
            var myDialog2 = new dialog();
            myDialog2.show({
                "message": "确定要取消吗",
                "closable":true,
                "position":"50% 50%",
                "modal":true});
            return false;
        }        
        return true;
    }
    var myDialog =new dialog();
    myDialog.show({
        "title": "我会有二级弹窗", 
        "message": "我真的会有二级弹窗",
        "modal":true,
        "closable":true,
        "buttons":BUTTON_YES_NO_CANCEL},
        onclose);
}
function x06(){
    var onclose = function (x,y){
        if(x == "yes"){
            var x=y.getElement("password");
            alert(x.value);
            return false;
        }        
        return true;
    }
    var myDialog = new dialog();
    myDialog.show({
        "title": "标题区", 
        "message": "消息区",
        "height":"440",
        "width":"500", 
        "closable":true,
        "modal":true,
        "body": [
            [{"type": "label", "text": "用户名"}, 
             {"type": "input", "name": "username"},
             {"type": "button","text": "检测", "value":"yes"},
             {"type": "tip", "text": "请输入用户名"},
             {"type": "tip", "text": "请输入密码"}],
            [{"type": "label", "text": "密码"}, 
             {"type": "input", "name": "password"},
             {"type": "button","text": "检测", "value":"no"},
             {"type": "tip", "text": "请输入密码"}],
            [{"type":"img","url":"headbg.jpg"}],
            // [{"type": "frame", "url": "http://zz.iyiban.cn/"}]
        ],
        "buttons":BUTTON_OK_CANCEL
    },
        onclose);
}
</script>
</body>
</html>
